@import "variables";
@import "mixins";
@import "layout";

#logo-license {
  @extend .callout;
  padding: 20px !important;
  margin-top: 2em;

  p {
    font-size: 12px;
    line-height: 1.4;
    color: $light-font-color;
  }

  p + p {
    margin-top: 14px;
  }

  img {
    float: left;
    margin-right: 20px;
  }
}

.callout#more-downloads {
  .column-left {
    width: 47%;
  }

  .column-right {
    width: 45%;
  }

  p {
    padding-bottom: 1em;
    line-height: 1.4;
  }
}

#download-next-steps {
  @include clearfix;
  @extend .unstyled !optional;
  padding-top: 24px;

  li {
    display: block;
    float: left;
    width: 200px;
    margin-bottom: 20px;
  }

  li + li {
    margin-left: 20px;
  }

  a {
    display: block;
    color: $font-color;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 0 0;
    transition-duration: 0.3s;
    transition-property: color;

    img {
      display: block;
      margin: 0 auto 10px;
      opacity: 0.9;
      transition-duration: 0.3s;
      transition-property: opacity;
      image-rendering: -webkit-optimize-contrast;
    }

    h3 {
      font-size: 18px;
      font-weight: bold;
      color: $orange;
    }

    p {
      font-size: 13px;
      line-height: $base-line-height * 0.8;
    }
  }

  a:hover {
    img {
      opacity: 1;
    }

    h3 {
      color: darken($orange, 5%);
    }
  }
}

#os-filter-count {
  position: relative;
  top: 8px;
  left: 12px;
  display: none;
  color: $orange;
}

.downloading .hide {
  display: none;
}
